Visualize Tab Stops, Headings, and Landmark Regions with Accessibility Insights

Another tool I recommend is the Accessibility Insights browser extension.

Like many of the tools we work with in this workshop series, it is also powered by the axe-core API under the hood.

The Accessibility Insights FastPass is similar to what we've seen with Axe DevTools, so we won't go into that part further.

However, I do want to share some of my other favorite parts of Accessibility Insights.

The launch pad screen of Accessibility Insights

Use Ad hoc Tools to Visualize Structure

Selecting the Ad hoc tools option in the Accessibility Insights extension loads a menu of available visualizations.

The Tab Stops Tool

One of the useful ad hoc tools that make for interesting screenshots is the Tab Stop tool.

Every time you hit Tab to move through the page, the ad hoc tool will draw lines and connect dots to where your focus went, and in what order.

Here's what it looks like on the homepage as it is now:

The Tab Stops tool shows the current focus order.

Here’s what the Tab Stops tool looked like before we made any fixes to fully hide inactive nav submenus:

The original focus order as reported by the tab stops tool.

That’s a pretty huge difference and helps drive home how bad the original keyboard experience was.

The Headings Tool

Toggling on the Headings function, Accessibility Insights will draw colored boxes around the headings and include an indicator of their level.

Here’s how the Contact section on the About page looks:

The Headings tool highlights headings and their levels.

The Landmarks Tool

Similar to the Headings tool, the Landmarks tool will highlight and label the page's landmarks.

This is useful for visualizing the landmarks you currently have and determining what on your page might work well in a region.

The Landmarks tool displaying landmarks for the finished CampSpots homepage

💡Tip

There’s an entire section of the Semantic Markup workshop dedicated to Headings & Landmarks for going further into the topic.

Accessibility Insights Assessment

The Assessment tool is an awesome guided tool that has you work through the WCAG AA success criteria, including things that can't be automated.

Overview screen for the Accessibility Insights Assessment tool

Each section provides information about what you need to do in order to test your application. Once you've performed the test, you self-report whether it passed or failed.

Accessibility Insights is a great tool to add to your manual testing process!